{% extends "public/layout.html" %}

{% load mytags %} 

{% block breadcrumb %}
     <ol class="breadcrumb">
        <li>
            <a href="{% url 'index' %}">首页</a>
        </li>
         <li>
             <a>用户管理</a>
         </li>
        <li class="active">
            <strong>用户列表</strong>
        </li>
    </ol>
{% endblock %}


{% block body %}

<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
    <div class="ibox float-e-margins">
            <h5> 查看用户 </h5>


<!--添加用户模态窗 -->
<div class="modal fade" id="user_add_modal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">

         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>                    
            <h4>添加用户</h4>
        </div>

        <div class="modal-body form-inline">
             <form method="post" action="" class="form-horizontal" id = "AddForm">
                 {% if msg %}
                <div class="alert alert-success alert-dismissable">
                    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
                    {{ msg | safe }}
                </div>
                {% endif %}

                <div class="form-group">
                    <label class="control-label">用户名：</label>
                    <input type="text" name="username" class="form-control" required="">
                </div>
                <div class="hr-line-dashed"></div>

                <div class="form-group">
                    <label class="control-label">姓 名：</label>
                    <input type="text" name="name" class="form-control" required="">
                </div>
                <div class="hr-line-dashed"></div>

                <div class="form-group">
                    <label class="control-label">手机：</label>
                    <input type="text" name='phone' placeholder="" class="form-control" required="">
                </div>
                <div class="hr-line-dashed"></div>

                <div class="form-group">
                    <label class="control-label">邮箱：</label>
                    <input type="email" name='email' placeholder="" class="form-control" required="">
                </div>
                <div class="hr-line-dashed"></div>

                <div class="form-group">
                    <button id="submit_button" class="btn btn-primary" type="submit">确认</button>
                    <button class="btn btn-white" type="reset">取消</button>
                </div>
             </form>

         </div>
    </div>
</div>
</div>
<!--添加用户模态窗结束 -->

<div class="ibox-content">
    <!--标题-->
     <div class="">
        <a href="#" class="btn btn-sm btn-primary" id = "addbtn"> 添加用户</a>
        <form  method="get" action="" class="pull-right mail-search">
            <div class="input-group">
                <input type="text" class="form-control input-sm"  name="keyword" value="{{keyword}}" placeholder="英文名|中文名">
                <div class="input-group-btn">
                    <button id='search_btn' type="submit" class="btn btn-sm btn-primary">
                        -搜索- 
                    </button>
                </div>
            </div>
        </form>
    </div>

<!--内容部分-->
    <table class="table table-striped table-bordered table-hover " id="editable" >
        <thead>
            <tr>
                <th class="text-center">用户名</th>
                <th class="text-center">姓名</th>
                <th class="text-center">小组</th>
                <th class="text-center">手机</th>
                <th class="text-center">激活</th>
                <th class="text-center">操作</th>
            </tr>
        </thead>
        <tbody>
        {% for user in page_obj.object_list %}
            <tr class="gradeX">
                <td class="text-center">{{ user.username }}</td>
                <td class="text-center"> {{ user.name }} </td>
                <td class="text-center"> {{ user.groups.all | group_str2 |default:"无"}} </td>
                <td class="text-center">{{ user.phone | default_if_none:'' }}</td>
                <td class="text-center">{{ user.is_active | bool2str }}</td>
                
                <td class="text-center">
                <div class="btn-group">
                <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false">修改<span class="caret"></span></button>
                  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                    <li role="presentation"><a role="menuitem" tabindex="-1"
                           href="{% url 'modify_pwd' %}?uid={{ user.id }}">修改密码</a>
                    </li>

                    <li role="presentation"><a role="menuitem" tabindex="-1"
                           href="{% url 'user_edit' %}?uid={{ user.id }}">用户信息</a>
                    </li>
                    
                    <li role="presentation"><a role="menuitem" tabindex="-1"
                           href="{% url 'user_group' %}?uid={{user.id}}"  class="user_group">用户组</a>
                    </li>

                    <li role="presentation"><a role="menuitem" tabindex="-1" 
                           href="{% url 'user_perm' %}?uid={{user.id}}"  class="user_perm">用户权限</a></li>
                    </ul>
                </div>
                <a class="btn btn-xs btn-danger del" data-id="{{ user.id }}" {% if user.username == 'admin' %} disabled {% endif %}>删除</a>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

 <!--分页部分-->
    <div class="row">
        <div class="col-sm-6">
            <div class="dataTables_info" id="editable_info" role="status" aria-live="polite">
                显示 [{{ p.count }}] 条数据中的 第 [{{ page_obj.start_index }}] 至 [{{ page_obj.end_index }}] 的数据
            </div>
        </div>
        {% include 'public/paginator.html' %}
    </div>

                </div> <!--ibox-content end-->
            </div>
        </div>
    </div>
</div>



{% endblock %}

{% block js %}
<script>
/*添加用户模态窗弹出*/
$("#addbtn").click(function(){
    $("#user_add_modal").modal("show"); 
});

/*添加用户*/
$("#submit_button").click(function(){
    var formdata = $('#AddForm').serialize()
    console.log(formdata)
    $.post('', formdata, function(res){
        if (res.code == 0) {
            swal({ 
                "title": "添加成功",
                 "text": res.result,
                 "type": "success"
            }, function () {
                 setTimeout(function () {
                    window.location.reload();
                 }, 50);
             })
        } else {
            swal("操作失败", res.errmsg, "error");
         }
    })
    return false;
})



/*删除用户*/
$("tbody").on('click','.del',function(){
    if(confirm("是否确认删除？")){
        var that = this;
        var id = $(this).attr('data-id')
        $.ajax({
            url:"",
            type: "DELETE",
            data: {"id":id},
            datatype: "json",
            success: function(res){
                console.log(res)
                if (res.code ==0){
                    swal("Good!", res.result, "success")
                    window.location.reload();
                }else{
                    swal("操作失败", res.errmsg, "error")
                }
            }
        })         

    }  // end confirm
     return false   
})
</script>
{% endblock %}

